<!--  -->
<template>
    <div class="page-wrap vimage">
      <!-- <div class="problem-list-img-list">
        <van-image v-for="(item, index) in fileList" :key="index" :src="item" class="problem-list-img"
        @click="showPreview(fileList)">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
    </div> -->
      <van-nav-bar title="图片预览"/>
      <div class="img-list" v-for="(i,index) in fileList" :key="i">
        <img :src="i" @click="showPreview(fileList,index)"/>
      </div> 
    </div>
  </template>
  
  <script>
  import { ImagePreview } from 'vant';
  import { vformService } from '@/api'
  // import { Toast } from 'vant';
  export default {
    name: 'Vfrom',
    data() {
      return {
          fileList: [],
      };
    },
    //组件
    components: {},
    //在实例创建完成后被立即调用
    created: async function () {
       const  recordId = this.$route.query.recordId;
        this.$toast.loading({
          message:'加载中···',
          duration:0
        })
       if(!recordId){
          return this.$toast.fail('参数错误');
       }     
            
       const res = await vformService.selectImage({recordId});
       if(res?.result?.fieidExt){
          this.fileList = JSON.parse(res.result.fieidExt);
          
       }else{
          this.$toast.fail('预览失败');
       }
       this.$toast.clear(); 
    },
    //计算属性  将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
    computed: {},
    //dom 加载完后执行
    mounted: function () {},
    //方法
    methods: {
      showPreview(images,index){
        ImagePreview({
          images:images,
          startPosition:index,
          closeable: true,
        });
      }
    },
    //一个对象，键是需要观察的表达式，值是对应回调函数
    watch: {},
  };
  </script>
  
  
  <style scoped lang="less">
    @import './vimage.less';
  </style>
  